<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-22 13:13:43
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-10-30 09:29:24
 * @FilePath: \app-formwork\src\pages\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="my_info flex column">
    <view class="my_info_position">
      <!-- 站住沉浸式状态栏 -->
      <view class="statusbar"></view>
      <!-- 头部内容 -->
      <view class="my_info_tittle">
        <view class="top flex">
          <view class="top_msg">
            <image :src="userinfo.avatar" alt="" v-if="isTokenShow" />
            <image src="../../assets/images/nologin.png" alt="" v-else />
          </view>

          <div class="edit flex column">
            <div class="edit_name flex justify-between items">
              <div class="name">
                <view class="tittle">{{ userinfo.nickname }}</view>
                <view v-if="isTokenShow">
                  <image
                    v-if="userinfo.medal"
                    class="medal"
                    style="margin-left: 16rpx"
                    src="../../assets/images/medal.png"
                    alt=""
                  />
                </view>
              </div>
              <div class="edit_info" @click="goEdit" v-if="isTokenShow">Edit</div>
              <div class="edit_info" v-else>Edit</div>
            </div>
            <div class="fans flex">
              <view
                class="focus flex column items justify-center"
                @click="onFans(1)"
                v-if="isTokenShow"
                style="margin-top: 20rpx"
              >
                <span>{{ userinfo.follow }}</span>
                <span style="margin-top: 16rpx">关注</span>
              </view>

              <view class="focus flex column items justify-center" v-else style="margin-top: 20rpx">
                <span>0</span>
                <span style="margin-top: 16rpx">关注</span>
              </view>

              <view
                class="fansnum flex column items justify-center"
                style="margin-top: 20rpx"
                @click="onFans(2)"
                v-if="isTokenShow"
              >
                <span>{{ userinfo.fans }}</span>
                <span style="margin-top: 16rpx">粉丝</span>
              </view>

              <view class="fansnum flex column items justify-center" v-else style="margin-top: 20rpx">
                <span>0</span>
                <span style="margin-top: 16rpx">粉丝</span>
              </view>
            </div>
          </div>
        </view>
        <view class="bottom flex justify-between">
          <div class="image_icon" @click="goMedal" v-if="isTokenShow">
            <image src="../../assets/images/xz.png" alt="" />
            <span>勋章</span>
          </div>

          <div class="image_icon" v-else>
            <image src="../../assets/images/xz.png" alt="" />
            <span>勋章</span>
          </div>

          <div class="image_icon" @click="goComment" v-if="isTokenShow">
            <image src="../../assets/images/pl.png" alt="" />
            <span>评论</span>
          </div>

          <div class="image_icon" v-else>
            <image src="../../assets/images/pl.png" alt="" />
            <span>评论</span>
          </div>

          <div class="image_icon" @click="goCollections" v-if="isTokenShow">
            <image src="../../assets/images/scwhite.png" alt="" />
            <span>收藏</span>
          </div>

          <div class="image_icon" v-else>
            <image src="../../assets/images/scwhite.png" alt="" />
            <span>收藏</span>
          </div>

          <div class="image_icon" @click="goLike" v-if="isTokenShow">
            <image src="../../assets/images/ax.png" alt="" />
            <span>喜欢</span>
          </div>

          <div class="image_icon" v-else>
            <image src="../../assets/images/ax.png" alt="" />
            <span>喜欢</span>
          </div>

          <div class="image_icon" @click="goSetting" v-if="isTokenShow">
            <image src="../../assets/images/sz.png" alt="" />
            <span>设置</span>
          </div>
          <div class="image_icon" v-else>
            <image src="../../assets/images/sz.png" alt="" />
            <span>设置</span>
          </div>
        </view>
      </view>
      <!-- 搜索 -->
      <view class="search flex items" v-if="isTokenShow">
        <span style="font-weight: bold">全部</span>
        <up-input
          class="up_input"
          placeholder="请输入"
          prefixIcon="search"
          prefixIconStyle="font-size: 22px;color: #909399"
          shape="circle"
          clearable
          v-model="fellowshipType.keywords"
          style="border: 2rpx solid #306eff; margin: 24rpx; padding: 4rpx 10rpx"
          @confirm="confirm"
          @clear="clear"
        ></up-input>
        <span @click="search">搜索</span>
      </view>
    </view>
    <!-- 头部固定 -->
    <!-- 占位 -->
    <view style="margin-top: 580rpx; background: #f5f5f5"></view>
    <!-- list列表 -->
    <commentList
      :tittleShow="tittleShow"
      :fellowshipLists="fellowshipLists"
      @fellowshipChange="editFellowship"
      @dianzanEdit="myCancelgoods"
      @shoucangEdit="myShoucangEdit"
      @guanzhuEdit="myFocus"
      @optionsDle="optionsDle"
      v-if="isTokenShow"
    ></commentList>
  </view>
</template>

<script setup>
import commentList from "../../components/comment-list/comment-list.vue";
import { userApi } from "@/api/user";
// 判断是否登录
// 如果有token 就代表已将登录 否则就是没有登录

onShow(() => {
  getToken();
  getUserInfo();
  fellowshipType.value.page = 1;
  getfellowshiplist();
});
const isTokenShow = ref(false);
const token = uni.getStorageSync("token");
const getToken = () => {
  if (token != "") {
    isTokenShow.value = true;
  }
};

//获取用户信息
const userinfo = ref({});
const getUserInfo = () => {
  userApi.userinfo().then((res) => {
    console.log("用户信息", res.data);
    userinfo.value = res.data;
  });
};
//输入框事件
const confirm = () => {
  fellowshipLists.value = [];
  fellowshipType.value.page = 1;
  getfellowshiplist();
};

//清空内容
const clear = () => {
  console.log("1111", 1111);
  fellowshipLists.value = [];
  fellowshipType.value.page = 1;
  fellowshipType.value.keywords = "";
  getfellowshiplist();
};

// 这是我的组件 来控制头部展示以及编辑按钮
const tittleShow = ref(false);

//获取论坛文章
const total = ref(0);
const page_last = ref(0);
const fellowshipLists = ref([]); //传过去的数组
const fellowshipType = ref({
  keywords: "",
  num: 10,
  page: 1
});
const getfellowshiplist = () => {
  userApi
    .fellowShip(fellowshipType.value)
    .then((res) => {
      if (res.code == 1) {
        total.value = res.data.total;
        // fellowshipLists.value = [...fellowshipLists.value, ...res.data.data];
        console.log("res", res.data.last_page);
        page_last.value = res.data.last_page;
        fellowshipLists.value =
          fellowshipType.value.page === 1 ? res.data.data : fellowshipLists.value.concat(res.data.data);
        fellowshipLists.value.forEach((item) => {
          item.options = false;
        });
        console.log("数据", fellowshipLists.value);
        uni.hideLoading();
      }
    })
    .catch(() => {
      uni.hideLoading();
    });
};
const optionsDle = (id) => {
  fellowshipLists.value.forEach((item) => {
    if (item.id == id) {
      item.options = !item.options;
    }
  });
};
// 触底触发
onReachBottom(() => {
  if (total.value > fellowshipType.value.num * fellowshipType.value.page) {
    fellowshipType.value.page++;
    getfellowshiplist();
    uni.showToast({
      title: "加载中……",
      icon: "none",
      duration: 1000
    });
  }
  if (page_last.value == fellowshipType.value.page) {
    uni.showToast({
      title: "没有更多了",
      icon: "none",
      duration: 1000
    });
    return;
  }

  // fellowshipType.value.page=1;
});
// const tittleShow = ref(true);
const dianzanType = ref(false);
// 点赞/取消点赞
const myCancelgoods = (id) => {
  let cancelgoodsType = {
    type: 1, //1是论坛 2是评论
    id: id
  };
  userApi
    .cancelgoods(cancelgoodsType)
    .then((res) => {
      //红色心心
      if (res.code == 0) {
        uni.showToast({ title: res.msg, icon: "none" });
      }
      uni.showToast({ title: res.msg, icon: "none" });
      fellowshipLists.value.forEach((item) => {
        if (item.id == id) {
          item.is_goods = res.data.boolean ? 1 : 0;
          item.goods_num = res.data.num;
        }
      });
      // fellowshipLists.value = [];
      // getfellowshiplist();
    })
    .catch((err) => {
      uni.showToast({ title: err.msg, icon: "none" });
    });
};

//收藏
const myShoucangEdit = (id) => {
  userApi
    .cancelcollect({ id: id })
    .then((res) => {
      if (res.code == 0) {
        uni.showToast({ title: res.msg, icon: "none" });
      }
      uni.showToast({ title: res.msg, icon: "none" });
      fellowshipLists.value.forEach((item) => {
        if (item.id === id) {
          item.is_collect = res.data.boolean ? 1 : 0;
          item.collect_num = res.data.num;
        }
      });
      // fellowshipLists.value = [];
      // getfellowshiplist();
    })
    .catch((err) => {
      uni.showToast({ title: err.msg, icon: "none" });
    });
};

//关注
const myFocus = (id) => {
  userApi
    .followFocus({ user_id: id })
    .then((res) => {
      uni.showToast({ title: res, icon: "none" });
      fellowshipLists.value.forEach((item) => {
        if (item.user_id === id) {
          item.is_follow = res.data ? 1 : 0;
        }
      });

      // fellowshipLists.value = [];
      // getfellowshiplist();
    })
    .catch((err) => {
      console.log("err", err);
      uni.showToast({ title: err.msg, icon: "none" });
    });
};

//删除论团文章

const editFellowship = (e) => {
  userApi
    .deletefellowship({ id: e })
    .then((res) => {
      uni.showToast({ title: res.msg, icon: "none" });
      fellowshipLists.value = [];
      getfellowshiplist();
    })
    .catch((err) => {
      uni.showToast({ title: err.msg, icon: "none" });
    });
};
//搜索
const search = () => {
  fellowshipType.value.page = 1;
  fellowshipLists.value = [];
  getfellowshiplist();
};

//去我的编辑页面
const goEdit = () => {
  uni.navigateTo({ url: "/pagesB/userinformation/user-information" });
};
//去勋章页面
const goMedal = () => {
  uni.navigateTo({ url: "/pagesB/medal/medal" });
};
//我的评论
const goComment = () => {
  uni.navigateTo({ url: "/pagesB/comment/mycomment" });
};
//我的评论
const goCollections = () => {
  uni.navigateTo({ url: "/pagesB/collections/mycollections" });
};
//我的评论
const goLike = () => {
  uni.navigateTo({ url: "/pagesB/like/mylike" });
};
// 粉丝&&关注
const onFans = (type) => {
  uni.navigateTo({ url: "/pagesB/fans/fans?type=" + type });
};
// 设置
const goSetting = () => {
  uni.navigateTo({ url: "/pagesB/setting/setting" });
};
</script>

<style lang="scss" scoped>
page {
  background: #f5f5f5;
  height: 100%;
}
p :deep(.u-border) {
  border: 2rpx solid #306eff !important;
}
.my_info {
  border-radius: 0px 0px 0px 0px;
  // height: 100%;
  background: #f5f5f5;
  width: 100%;
  box-sizing: border-box;

  .my_info_position {
    position: fixed;
    // height: 100%;
    width: 100%;
    background: #fff;
    z-index: 9999;
    .statusbar {
      height: 88rpx;
      background-color: #306eff;
    }
    .top_msg {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 160rpx;
      width: 160rpx;
      border-radius: 50%;
      background-color: #fff;

      image {
        width: 152rpx;
        height: 152rpx;
        border-radius: 50%;

        // margin-top: 2rpx;
      }
    }
    .my_info_tittle {
      height: 372rpx;
      width: 100%;
      background: #306eff;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      opacity: 1;
      box-sizing: border-box;
      padding: 36rpx 32rpx;
      .top {
        // height: 160rpx;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        opacity: 1;
        width: 100%;

        .edit {
          margin-left: 40rpx;
          // width: 100%;
          flex: 1;
          .edit_name {
            height: 50rpx;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .name {
              display: flex;
              .medal {
                height: 48rpx;
                width: 48rpx;
                border: none;
              }
              .tittle {
                margin-left: 16rpx;
                font-size: 36rpx;
                font-family: PingFang SC-Bold, PingFang SC;
                font-weight: bold;
                color: #ffffff;
              }
            }
            .edit_info {
              font-size: 32rpx;
              font-family: PingFang SC-Bold, PingFang SC;
              font-weight: bold;
              color: #c7e7ff;
            }
          }
          .fans {
            height: 94rpx;
            border-radius: 0rpx 0rpx 0rpx 0rpx;
            opacity: 1;
            .focus {
              margin-left: 36rpx;

              height: 94rpx;
              span {
                font-size: 24rpx;
                font-family: PingFang SC-Bold, PingFang SC;
                font-weight: bold;
                color: #ffffff;
                line-height: 28rpx;
              }
            }
            .fansnum {
              margin-left: 80rpx;
              height: 94rpx;
              span {
                font-size: 24rpx;
                font-family: PingFang SC-Bold, PingFang SC;
                font-weight: bold;
                color: #ffffff;
                line-height: 28rpx;
              }
            }
          }
        }
      }
      .bottom {
        height: 120rpx;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        opacity: 1;
        margin-top: 20rpx;
        .image_icon {
          width: 120rpx;
          height: 120rpx;
          border-radius: 0rpx 0rpx 0rpx 0rpx;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          image {
            height: 50rpx;
            width: 50rpx;
            margin-bottom: 8rpx;
          }
          span {
            font-size: 28rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #ffffff;
            line-height: 33rpx;
            margin-top: 4rpx;
          }
        }
      }
    }
    :deep(.u-border) {
      border: 2rpx solid #306eff !important;
    }
    .search {
      height: 120rpx;
      background: #ffffff;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      opacity: 1;
      box-sizing: border-box;
      padding: 32rpx;
      span {
        font-size: 28rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 500;
        color: #306eff;
        line-height: 33rpx;
      }
    }
  }
}
</style>
